import Vuex from 'vuex';
import Vue from 'vue';
import axios from 'axios';


Vue.use( Vuex )

var store = new Vuex.Store({
    state : { 
        shops:null,
        protectors: null,

        shop: null, // shopid
        protector: null, //protectors

        layoutPic: [], // { layoutPic_url : 'xx' }
        arm_areas:[],
        channels:{},
        step:1,
        nvrs:{},
    },
    mutations: { 
        setStep(state,data){
            state.step = data;
        },
        setProtector( state, data ) { 
            state.protector = data
        },
        setShop( state, data ) {
            state.shop = data
        },
        initState( state, data){
            state.shops = data.shops;
            state.protectors = data.protectors;
        }
    },
    actions: {
        //提交操作，放在最后一步再进行
        finish( { state } ) {

            var data = { layers: [], arm_areas: null, shopid: state.shop.id, mac: state.protector.mac, nvrs: {}, cameras: {} };

            for( let i = 0; i < state.layoutPic.length; i++ ){
                data.layers.push( { name: state.layoutPic[i].name, img_suffix: state.layoutPic[i].file.name.match( /\.[a-z,A-Z]+/g )[0] } )
            }

            data.arm_areas = state.arm_areas;

            var nvrs = {};
            for( let ip in state.nvrs ){
                nvrs[ip] = { 
                    ip: ip, 
                    port: 80, 
                    username:  state.nvrs[ip].username,
                    password:  state.nvrs[ip].password,
                };
            }
            data.nvrs = nvrs;

            var cameras = { };
            for( let channel in state.channels ){
                cameras[channel] =  state.channels[channel].arm_area_idx;
            }
            data.cameras = cameras;

            console.log( "finish data: ", data )

            axios.post( '/api/v1/security/shop', data  ).then(function( resp ){
                console.log( "resp: ", resp )
                var layers = resp.data.layers;
                for( let i = 0; i < layers.length; i++  ){
                    axios.put( layers[i].layout_pic_url,  state.layoutPic[i].file, { headers: { Authorization: layers[i].Authorization }}).then(function( resp ){
                        console.log( "resp :", resp  )
                        console.log( "upload " + layers[i].layout_pic_url + " to qcloud: ", resp.data )
                        Vue.set( state.layoutPic[i],  'pic', layers[i].layout_pic_url );
                    })
                    .catch(function( resp ){
                        console.log( resp )
                    })
                }
            })
        }
    }
});


var initState = function( ) {
    return new Promise( function( resolve, reject ){ 
        var vm = {};
        axios.get( '/api/v1/shops').then(function( resp ){ 
            var vmshops = { };
            var shops = resp.data.shops;
            for( let i = 0; i < shops.length; i++ ) { 
                vmshops[shops[i].id] = shops[i];
            }
            console.log( "get shops: ", vmshops );
    
            axios.get( '/api/v1/protectors').then( function( resp ){
                var vmprotectors = {};
                var protectors = resp.data.protectors;
                console.log( 'protectors: ', protectors, protectors.length )
                for( let i = 0; i < protectors.length; i++){
                    console.log( protectors[i].shopid );
                    if( protectors[i].shopid ) { 
                        vmshops[protectors[i].shopid].mac = protectors[i].mac;
                    }
                    vmprotectors[protectors[i].mac] = protectors[i];
                }
                console.log( vmshops )
                vm.shops = vmshops;
                vm.protectors = vmprotectors;
                store.commit( "initState", vm );
                resolve("ok");
            });
        })
        .catch( ( error )=>{
            if( error.response.status == 403 ){
                window.location.href = window.location.origin +'/login.html';
                console.log( "-----------" );
            }
        });
    });
}


export { store, initState };
